<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router</title>
    <!--1.引入相关的库文件-->
    <script src="../lib/vue_2.5.22.js"></script>
    <script type="text/javascript"></script>
</head>
<body>


<!-- 被vm实例所控制的区域-->
<div id="app">

    <div>父组件</div>
    <base-layout>

        <!-- 2.通过slot属性来指定, 这个slot的值必须和下面slot组件的name值对应上-->
        <p slot="header">标题信息</p>

        <!-- 如果没有匹配到 则防在匿名的插槽中-->
        <p>主要内容1</p>
        <p>主要内容2</p>
        <p>主要内容3</p>

        <p slot="footer">底部信息</p>
    </base-layout>


    <hr>
    <hr>

    <base-layout>

        <!-- 注意点:
          具名插槽的渲染顺序, 完全取决于模板, 而不是取决于父组件中元素的顺序
          #
          下面就是一个很好的证明,  父组件顺序是 标题 -> 底部 -> 主体
                                模板组件顺序是  标题 -> 主体 -> 底部

           最终的打印结果还是以模板组件顺序
          -->
        <template slot="header">
            <p>标题信息1</p>
            <p>标题信息2</p>
            <p>标题信息3</p>
        </template>

        <!-- 注意点: template临时的包裹标签最终不会渲染到页面上 -->
        <template slot="footer">
            <p>底部信息1</p>
            <p>底部信息2</p>
        </template>
        <p>主要内容1</p>
        <p>主要内容2</p>
        <p>主要内容3</p>


    </base-layout>


</div>

<script>


    /**
     * 具名插槽: 父组件向子组件传递内容 [可以是模板信息, 不单单是值]
     */
    Vue.component('base-layout', {
        data: function () {
            return {
                num: 0
            }
        },
        methods: {},
        /**
         * 1.使用<slot>中的"name" 属性绑定元素 指定当前插槽的名字
         * 注意点:
         * 具名插槽的渲染顺序, 完全取决于模板, 而不是取决于父组件中元素的顺序
         * #
         *  <header>
         *      <slot name="header"></slot>
         *  </header>
         */
        template: `
        <div>
            <header>
                <slot name="header"></slot>
            </header>

            <main>
                <slot></slot>
            </main>

            <footer>
                <slot name="footer"></slot>
            </footer>

        </div>
        `
    });

    var vue = new Vue({
        // 指定控制的区域
        el: "#app",
        data: {},
        methods: {}
    });


</script>


</body>
</html>